<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
const diZhi = ()=>{
    router.push({
        path:'/address'
    })
}
</script>

<template>
  <div class="my">
        <div class="header">
            <div class="person">
                <!-- 头像 -->
                <div class="person_avatar">
                    <img src="http://www.dell-lee.com/imgs/vue3/orange.png" alt="">
                </div>
                <!-- 个人信息 -->
                <div class="person_info">
                    <div class="person_info_name">zhangsan</div>
                    <div class="person_info_id">ID: 000001</div>
                </div>
                <!-- 列表信息 -->
                <div class="person_message">
                    <div class="person_message_item">
                        <div class="person_message_item_title">红包</div>
                        <div class="person_message_item_content">218</div>
                    </div>
                    <div class="person_message_item">
                        <div class="person_message_item_title">红包</div>
                        <div class="person_message_item_content">218</div>
                    </div>
                    <div class="person_message_item">
                        <div class="person_message_item_title">红包</div>
                        <div class="person_message_item_content">218</div>
                    </div>
                    <div class="person_message_item">
                        <div class="person_message_item_title">红包</div>
                        <div class="person_message_item_content">218</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="list">
            <!-- 功能列表 -->
            <div class="list_item">
                <span class="iconfont list_item_icon list_item_wallet">&#xe631;</span>
                <div class="list_item_message">我的钱包</div>
                <span class="iconfont list_item_arrow">&#xe8f1;</span>
            </div>
            <div class="list_item" @click="diZhi">
                <span class="iconfont list_item_icon list_item_address">&#xe60d;</span>
                <div class="list_item_message">我的地址</div>
                <span class="iconfont list_item_arrow">&#xe8f1;</span>
            </div>
            <div class="list_item">
                <span class="iconfont list_item_icon list_item_help">&#xe616;</span>
                <div class="list_item_message">客服与帮助</div>
                <span class="iconfont list_item_arrow">&#xe8f1;</span>
            </div>
        </div>
        <div class="logout">退出登录</div>
    </div>
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
.my {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    .header {
        position: relative;
        height: 2.5rem;
        background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
        border-radius: 0 0 35% 35%;

        .person {
            position: absolute;
            top: 1rem;
            left: .18rem;
            right: .18rem;
            background-color: $bgColor;
            padding-top: .6rem;
            border-radius: .08rem;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .08);
            //头像
            &_avatar {
                position: absolute;
                left: 50%;
                top: -0.47rem;
                transform: translateX(-50%);
                border-radius: 50%;
                overflow: hidden;
                z-index: 1;

                img {
                    width: .94rem;
                    height: .94rem;
                    display: block;
                }
            }
            //个人信息
            &_info {
                border-bottom: .01rem solid $content_bgColor;
                padding: .16rem 0;

                &_name {
                  line-height: .36rem;
                  text-align: center;
                  font-size: .24rem;
                  color: #262628;
                }
                &_id {
                    text-align: center;
                    font-size: .14rem;
                    color: #C1C0C9;
                }
            }
            //列表信息
            &_message {
                padding: .16rem .28rem;
                display: flex;

                &_item {
                    flex: 1;
                    text-align: center;

                    &_title {
                        color: #C1C0C9;
                    }
                    &_content {
                        font-size: .2rem;
                        color: #262628;
                        margin-top: .03rem;
                    }
                }
            }
        }
    }

    .list {
        margin: 1rem .18rem 0 .18rem;
        border-radius: .08rem;
        box-shadow: 0 .0 .16rem .08rem rgba(0, 0, 0, .08);

        &_item {
            display: flex;
            align-items: center;
            padding: .12rem .16rem;
            //图标
            &_icon {
                font-size: .16rem;
                padding: .03rem;
                color: $bgColor;
                border-radius: .08rem;
                margin-right: .16rem;

            }
            // 钱包
            &_wallet {
                background-color: #ED4A47;
            }
            // 地址
            &_address {
                background-color: #32C5FF;
            }
            //客服与帮助
            &_help {
                background-color: #9013FE;
            }
            //文字
            &_message {
                flex: 1;
                font-size: .14rem;
            }
        }
    }

    .logout {
        margin: .18rem;
        line-height: .32rem;
        background-color: $btn_bgColor;
        color: $bgColor;
        text-align: center;
        border-radius: .04rem;
    }
}
</style>